@import url(./common.less);
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?khbe0d');
    src:  url('../fonts/icomoon.eot?khbe0d#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?khbe0d') format('truetype'),
      url('../fonts/icomoon.woff?khbe0d') format('woff'),
      url('../fonts/icomoon.svg?khbe0d#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
@baseFont:50px;
*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    background-color: rgb(224, 224, 224);
}
header{
    position: relative;
    width: 15rem;
    height: (88rem / @baseFont);
    background-color: skyblue;
    .icon1{
        position: absolute;
        top: (10rem / @baseFont);
        left: (10rem / @baseFont);
        img{
            width: (36rem / @baseFont);
            height: (60rem / @baseFont);
        }
    }
    .icon2{
        position: absolute;
        top: (10rem / @baseFont);
        left: (150rem / @baseFont);
        img{
            width: (360rem / @baseFont);
            height: (60rem / @baseFont);
        }
    }
    .icon3{
        position: absolute;
        top: (10rem / @baseFont);
        right: (10rem / @baseFont);
        img{
            width: (36rem / @baseFont);
            height: (60rem / @baseFont);
        }
    }
   
    

}
.search{
    box-sizing: border-box;
    padding: 0 (10rem / @baseFont);
    height: (88rem / @baseFont);
    background-color: skyblue;
    line-height: (88rem / @baseFont);
    .search-in{
        height: (70rem / @baseFont);
        margin:0 (10rem / @baseFont);
        transform: translateY((9rem / @baseFont));
        background-color: white;
        line-height: (70rem / @baseFont);
        border-radius: (35rem / @baseFont);
        font-size: (20rem / @baseFont);
        color: #ccc;
        &::before{
            content: "";
            font-family: 'icomoon';
            // font-size: (20rem / @baseFont);
            margin-left: (20rem / @baseFont);
            margin-right: (20rem / @baseFont);
        }
    }
}
.bannar{
    width: 100%;
    height: (229rem / @baseFont);
    background: -webkit-linear-gradient(top,skyblue,rgb(243, 252, 255));
    a{
        position: relative;
        display: block;
        overflow: hidden;
        width: 96%;
        height: (229rem / @baseFont);
        transform: translateX(2%);
        text-align: center;
        background-color: pink;
        border-radius: (20rem / @baseFont);
        img{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            // height: 100%;
            display: block;
        }
    }
    
}
.bannar2{
    margin: 0;
    padding: 0;
    width: 15rem;
    height: (181rem / @baseFont);
    background-color: white;
    a{
        display: block;
        text-decoration: none;
        list-style: none;
        width: 15rem;
        height: (181rem / @baseFont);
        img{
            display: block;
            width: 15rem;
            height: (181rem / @baseFont);
        }
    }
}
nav{
     display: flex;
     flex-wrap: wrap;
     background-color: white;
     div{
         position: relative;
         flex: 20%;
         height: (150rem / @baseFont);
         text-align: center;
         img{
             position: absolute;
             top: (10rem / @baseFont);
             left: 50%;
             transform: translateX(-50%);
             width: (84rem / @baseFont);
             height: (84rem / @baseFont);
         }
         span{
             line-height: (200rem / @baseFont);
             font-size: (20rem / @baseFont);
         }
     }
}
.quan{
    display: flex;
    height: (234rem / @baseFont);
    background-color: white;
    width: 15rem;
    a{
     text-decoration: none; 
     list-style: none;  
     display: block;
    }
    .quan1{
        flex: 2;
        // background-color: yellow;
        img{
            width: 100%;
            height: (234rem / @baseFont);
        }
    }
    .quan2{
        flex: 1;
        // background-color: yellowgreen;
        box-sizing: border-box;
        padding-right: (2rem / @baseFont);
        img{
            width: 100%;
            height: (234rem / @baseFont);
        }
    }
    .quan3{
        flex: 1;
        box-sizing: border-box;
        padding-right: (2rem / @baseFont);
        // background-color: green;
        img{
            width: 100%;
            height: (234rem / @baseFont);
        }
    }

}
.more{
    height: (100rem / @baseFont);
}
.login{
    position: relative;
    position: fixed;
    bottom: (88rem / @baseFont);
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: (88rem / @baseFont);
    background-color: rgba(0,0,0,.3);
    span{
        position: absolute;
        top: 0;
        left: 5px;
        line-height: (88rem / @baseFont);
        text-align: center;
        font-size: (24rem / @baseFont);
    }
    div{
        position: absolute;
        top: 50%;
        right: (5rem / @baseFont);
        transform: translateY(-50%);
        width: (150rem / @baseFont);
        height: (50rem / @baseFont);
        line-height: (50rem / @baseFont);
        text-align: center;
        background-color: tomato;
        border-radius: 15px;
        font-size: (24rem / @baseFont);
    }
}

footer{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: (88rem / @baseFont);
    background-color: white;
    div{
        flex: 1;
        a{
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            text-align: center;
            margin: 0;
            padding: 0;
            img{
                position: absolute;
                top: (5rem / @baseFont);
                left: 50%;
                transform: translateX(-50%);
                display: block;
                width: (48rem / @baseFont);
                height: (48rem / @baseFont);
            }
            span{
                color: #ccc;
                line-height: (130rem / @baseFont);
                font-size: (16rem / @baseFont);
            }
        }
        
    }
}